import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import Button from '../../components/common/button';
import toast from '../../utils/toast';
import { not } from '../../utils/validator';
import { getQueryParam } from '../../utils/url';


@connect(({ user, loading }) => {
  return {
    smsTimeLeft: user.get('sms'),
    busy: loading.effects['user/login'],
    verToken: user.get('verToken'),
    yyeCode: user.get('yyeCode'),
  };
})
class Login extends BaseComponent {
  state = {
    mobile: '',
    code: '',
    agree: true,
  }

  mobileChange = (e) => {
    this.setState({
      mobile: e.target.value,
    });
  }

  codeChange = (e) => {
    this.setState({
      code: e.target.value,
    });
  }


  toggleAgree = () => {
    this.setState({ agree: !this.state.agree });
  }

  clickRegister = () => {
    const {
      mobile,
      code,
      agree,
    } = this.state;
    const { verToken, yyeCode } = this.props;
    const youyuerCode = getQueryParam('yyeCode') || yyeCode;
    console.log('mobile:', mobile, 'code:', code);
    if (not('mobile', mobile)) {
      toast('请输入正确的手机号码');
    } else if (not('code', code)) {
      toast('请输入正确的验证码');
    } else if (!agree) {
      toast('请同意鱿鱼用户协议');
    } else if (!youyuerCode) {
      toast('请关闭当前页面重新进入');
    } else {
      this.props.dispatch({
        type: 'user/login',
        payload: {
          phone: mobile,
          code,
          verToken,
          yyeCode: youyuerCode,
          source: window.source,
          redirect: getQueryParam('callbackUrl'),
        },
      });
    }
  }

  btnDisabled = () => {
    const { mobile, code } = this.state;
    return not('mobile', mobile) || not('code', code);
  }

  goLogin = () => {
    this.props.history.push('login');
  }

  goAgreement = () => {
    this.props.history.push('agreement');
  }

  clickSms = () => {
    const { mobile } = this.state;
    if (not('mobile', mobile)) {
      toast('请输入正确的手机号码');
    } else {
      this.props.dispatch({
        type: 'user/sendSmsCode',
        payload: {
          phone: mobile,
        },
      });
    }
  }

  render() {
    const {
      mobile,
      code,
      agree,
    } = this.state;

    const { smsTimeLeft, busy } = this.props;
    return (
      <div className="auth-chongqing">
        <div className="content-view">
          <div className="title">登录鱿鱼加油</div>
          <div className="input-row">
            <div className="input-title">手机号</div>
            <input
              type="tel"
              maxLength={11}
              placeholder="请输入手机号码"
              className={`input ${mobile.length > 0 ? 'active' : ''}`}
              onChange={this.mobileChange}
            />
          </div>
          <div className="input-row">
            <div className="input-title">验证码</div>
            <input
              type="tel"
              maxLength={6}
              placeholder="请输入验证码"
              className={`input ${code.length > 0 ? 'active' : ''}`}
              onChange={this.codeChange}
            />
            <div className="sms" onClick={this.clickSms}>{smsTimeLeft > 0 ? `${smsTimeLeft}秒后获取` : '获取验证码'}</div>
          </div>
          <Button className="action-btn" title="立即登录" clickFunc={this.clickRegister} loading={busy} disabled={this.btnDisabled()} />
          <div className="agreement-row">
            <i className={`iconfont icon-checkbox ${agree ? 'icon-checked' : 'icon-unchecked'}`} onClick={this.toggleAgree} />
            <p className="text">同意<span className="link" onClick={this.goAgreement}>鱿鱼用户协议</span></p>
          </div>
          <div className="flex-blank" />
        </div>
      </div>
    );
  }
}

export default Login;
